<template>
  <div class="video-list">
    <div
      class="video-list-box"
      v-for="(item, index) in props.data"
      :key="index"
    >
      <div class="video-list-card">
        <div class="video-list-video-box" @click="onPreview(item)">
          <!-- <video class="video-list-video" :src="item.url"></video> -->
          <img class="video-list-video" :src="item.videoFirstImg || bgImage" alt="">
        </div>

        <div class="video-list-title">{{ item.title }}</div>
        
        <div class="video-list-content">{{ item.content }}</div>

        <div>
          <ElButton v-if="auth.has('edit')" link type="primary" @click="onEdit(item)">编辑</ElButton>
          <ElButton v-if="auth.has('delete')" link type="primary" @click="onRemove(item)">删除</ElButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuth } from '@/utils/auth'
import { editDialog } from '../dialog'
import { removeVideoManage } from '../api'
import bgImage from './bg-image.png'

const auth = useAuth()

const props = defineProps<{ data: Array<any> }>()
const emit = defineEmits()

const onEdit = async (row) => {
  await editDialog.open({ row })
  emit('update')
}

const onRemove = async row => {
  await ElMessageBox.confirm('是否确定删除？', '提示')
  await removeVideoManage([row.videoManageId])
  ElMessage.success('操作成功')
  emit('update')
}

const onPreview = row => {
  window.open(row.url, '_blank')
}
</script>

<style scoped lang="scss">
.video-list {
  display: flex;
  flex-wrap: wrap;
  &-box {
    box-sizing: border-box;
    padding: 0 10px;
    width: 25%;
    height: 327px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
  }
  &-card {
    max-width: 350px;
  }

  &-video-box {
    max-width: 100%;
    height: 220px;
    cursor: pointer;
    overflow: hidden;
  }
  &-video {
    max-width: 100%;
    height: 220px;
    width: auto;
  }

  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  &-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.0em; /* 高度为字体大小的两倍 */
    line-height: 1.5em; /* 行高 */
    height: 3.0em; /* 高度为行高的两倍 */

    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
  }
}
</style>
